<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>简单导航</title>
    <link href="https://gitee.com/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        @charset "utf-8";
        @import url(https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css) screen and (min-width:0px);

        :after,
        :before {
            font-family: fontawesome;
        }

        body {
            padding: 0;
            margin: 0;
            background: #f0f0f5;
        }

        * {
            box-sizing: border-box;
        }

        #logo {
            height: 60px;
            letter-spacing: 3px;
            font-size: 32px;
        }

        #search {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f0f0f5;
            justify-content: center;
            height: 60vh;
        }

        #serch-area,
        #ipt {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        #ipt {
            flex-grow: 1;
        }

        #serch-area {
            border-radius: 4px;
            /* overflow: hidden; */
            min-width: 50vw;
        }

        #search-logo {
            height: 40px;
            width: 40px;
            border-radius: 4px 0 0 4px;
            background: white;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #search-logo img {
            width: 20px;
            height: 20px;
        }

        #search-input {
            height: 40px;
            padding: 10px;
            width: 200px;
            background: white;
            border: none;
            outline: none;
            flex-grow: 1;
        }

        #search-btn {
            height: 40px;
            width: 80px;
            border-radius: 0 4px 4px 0;
            background: #009688;
            display: flex;
            color: white;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        #search-list {
            display: none;
            position: absolute;
            margin: 0;
            padding: 0;
            list-style-type: none;
            top: 100%;
            left: 0;
            width: 300px;
            max-height: 200px;
            margin-top: 2px;
            overflow-y: auto;
            border-radius: 4px;
            z-index: 5;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
        }

        .search-engine {
            height: 40px;
            background: white;
            cursor: pointer;
            display: flex;
            width: 300px;
            align-items: center;
        }

        .search-engine img {
            width: 20px;
            height: 20px;
            margin: 10px
        }

        .search-engine:hover {
            background: #f0f0f0;
        }

        #footer {
            text-align: center;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #footer a {
            text-decoration: none;
            color: inherit
        }

        #footer a:hover {
            color: lightseagreen
        }

        #sidebar-content {
            position: fixed;
            width: 300px;
            height: 100vh;
            top: 0;
            left: -300px;
            bottom: 0;
            padding: 10px;
            background: #fff;
            overflow-y: auto;
            z-index: 10;
            transition: left 300ms;
        }

        #sidebar-content::-webkit-scrollbar {
            display: none;
        }

        .sidebar-close {
            left: 0px !important;
        }

        .sidebar-toggle {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 10px;
            margin: 10px;
            left: 0px;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: left 300ms;
            border-radius: 100px;
            background: #f0f0f5;
            color: inherit;
            box-shadow: none;
        }

        .sidebar-toggle::before {

            content: "\f0c9";
        }

        .sidebar-close .sidebar-toggle {
            left: 300px;
            transition: left 300ms;
            color: white;
            background-color: #009688;
            box-shadow: 0 6px 10px 0 rgba(0, 150, 136, .3);
        }

        .sidebar-close .sidebar-toggle::before {
            content: "\f060";
        }

        .sidebar-close #sidebar-content {
            left: 0px;
            transition: left 300ms;
        }

        .series h2 {
            font-size: 20px;
            margin: 0;
            line-height: 2;
            text-indent: 10px;
            font-weight: 500;
        }

        .item-container {
            display: flex;
            flex-wrap: wrap;
        }

        .series-item {
            flex: auto;
            width: 100px;
            margin: 10px;
        }

        .series-item a {
            display: flex;
            align-items: center;
            padding: 0 10px;
            background: #eee;
            border-radius: 4px;
            text-decoration: none;
            color: inherit;
            /* justify-content: center; */
        }

        .series-item a:hover {
            background-color: #009688;
            color: #fff;
            transition: all 300ms;
        }

        .series-item img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .series-item p {
            margin: 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item-title {
            display: flex;
        }

        .item-title h2 {
            flex-grow: 1;
        }

        .item-folder {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }



        .item-folder::before {
            content: "\f077";
            /* transform: rotate(180deg) 300ms; */
        }

        .item-fold .item-folder::before {
            content: "\f078" !important;
            /* transform: rotate(180deg) 300ms; */
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="search">
            <div id="logo">
                简单导航
            </div>
            <div id="serch-area">
                <div id="ipt">
                    <div id="search-logo">
                        <img src="https://ico.hnysnet.com/get.php?url=https://www.baidu.com/">
                    </div>
                    <ul id="search-list">
                        <li v-for="search in search">
                            <div class="search-engine" :data-url="search.url" :data-info="search.info"><img
                                    :src="search.favicon">{{search.name}}</div>
                        </li>
                    </ul>
                    <input type="" name="" id="search-input" value="" placeholder="百度一下" />
                </div>
                <div id="search-btn">搜索</div>
            </div>
        </div>
        <div id="sidebar">
            <div class="sidebar-toggle"></div>
            <div id="sidebar-content">
                <div class="series" v-for=" series in series">
                    <div class="item-title">
                        <h2>{{series.series_name}}</h2>
                        <div class="item-folder">

                        </div>
                    </div>

                    <div class="item-container">
                        <div class="series-item" v-for=" series_content in series.series_content">
                            <a :href="series_content.url" target="_blank" :title="series_content.info">
                                <img :src="series_content.favicon">
                                <p>{{series_content.name}}</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                search: [{
                    favicon: 'https://ico.hnysnet.com/get.php?url=https://www.baidu.com/',
                    name: '百度一下',
                    info: '百度一下，你就知道',
                    url: 'https://www.baidu.com/s?wd='
                },
                {
                    favicon: 'https://ico.hnysnet.com/get.php?url=https://www.xiaoso.net/',
                    name: '小搜索',
                    info: '输入关键词',
                    url: 'https://www.xiaoso.net/m/search?wd='
                },
                {
                    favicon: 'https://ico.hnysnet.com/get.php?url=https://sci-hub.tw/',
                    name: 'sci-hub',
                    info: '输入DOI',
                    url: 'https://sci-hub.tw/'
                },
                {
                    favicon: 'https://ico.hnysnet.com/get.php?url=https://kns.cnki.net/',
                    name: '中国知网',
                    info: '输入文章主题',
                    url: 'http://kns.cnki.net/kns/brief/Default_Result.aspx?code=SCDB&kw='
                }
                ],
                series: [{
                    series_name: '文献检索',
                    series_content: [{
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://kns.cnki.net',
                        url: 'https://kns.cnki.net/kns/brief/result.aspx?dbprefix=SCDB&crossDbcodes=CJFQ,CDFD,CMFD,CPFD,IPFD,CCND,CCJD',
                        name: '中国知网',
                        info: '中国最大的文献检索网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://xueshu.baidu.com/',
                        url: 'https://xueshu.baidu.com/',
                        name: '百度学术',
                        info: '保持学习的态度'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.cn-ki.net/',
                        url: 'https://www.cn-ki.net/',
                        name: 'iData',
                        info: '免费下载知网文献'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.wanfangdata.com.cn/',
                        url: 'http://www.wanfangdata.com.cn/searchResult/getAdvancedSearch.do?searchType=all',
                        name: '万方数据库',
                        info: '文献检索网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.duxiu.com/',
                        url: 'https://www.duxiu.com/?lsu=shr',
                        name: '读秀',
                        info: '专业查文献，书籍，支持文献互助'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.chaoxing.com/',
                        url: 'https://www.chaoxing.com/',
                        name: '超星发现',
                        info: '文献检索网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://qikan.cqvip.com',
                        url: 'http://qikan.cqvip.com/Qikan/Search/Advance?from=index',
                        name: '维普资讯',
                        info: '文献检索网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.lib.ctgu.edu.cn/',
                        url: 'http://210.42.38.36/reslist',
                        name: '三大图书馆',
                        info: '三峡大学校外访问'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://xilesou.99lb.net/',
                        url: 'http://xilesou.99lb.net/',
                        name: 'Glgoo',
                        info: '谷歌学术镜像网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.ixueshu.com/',
                        url: 'https://www.ixueshu.com/',
                        name: '爱学术',
                        info: '关注公众号，下载文献'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://arxiv.org/',
                        url: 'https://arxiv.org/',
                        name: 'Arxiv',
                        info: '收集物理学、数学、计算机科学与生物学论文预印本的网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://scholar.chongbuluo.com/',
                        url: 'https://scholar.chongbuluo.com/',
                        name: '学术搜索',
                        info: '虫部落学术搜索资源整合'
                    },
                    ]
                },
                {
                    series_name: '论文发表',
                    series_content: [
                        {
                            favicon: 'https://ico.hnysnet.com/get.php?url=http://www.letpub.com.cn/index.php?journalid=4456&page=journalapp&view=detail',
                            url: 'http://www.letpub.com.cn/index.php?journalid=4456&page=journalapp&view=detail',
                            name: 'LetPub',
                            info: 'LetPub'
                        }
                    ]
                },
                {
                    series_name: '代码社区',
                    series_content: [{
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.csdn.net/',
                        url: 'https://www.csdn.net/',
                        name: 'CSDN',
                        info: '程序员最活跃的社区'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.cnblogs.com/',
                        url: 'https://www.cnblogs.com/',
                        name: '博客园',
                        info: '小众的博客社区'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://juejin.im/',
                        url: 'https://juejin.im/',
                        name: '掘金',
                        info: '掘金'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://segmentfault.com/',
                        url: 'https://segmentfault.com/',
                        name: 'segmentfault',
                        info: 'segmentfault思否'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://github.com/',
                        url: 'https://github.com/',
                        name: 'Github',
                        info: '全球最大的开源社区'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://gitee.com/',
                        url: 'https://gitee.com/',
                        name: 'Gitee',
                        info: '中国的Github'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://www.ilovematlab.cn/forum.php?mod=home',
                        url: 'https://www.ilovematlab.cn/forum.php?mod=home',
                        name: 'Matlab',
                        info: 'Matlab中文论坛'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.pudn.com/',
                        url: 'http://www.pudn.com/',
                        name: '联合开发网',
                        info: '代码资源挺多的'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.verysource.com/',
                        url: 'http://www.verysource.com/',
                        name: 'VerySource',
                        info: '代码资源网站'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.codeforge.cn/',
                        url: 'http://www.codeforge.cn/',
                        name: 'Codeforge',
                        info: '代码资源网站'
                    },
                    ]
                },
                {
                    series_name: '开发文档',
                    series_content: [{
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://docs.python.org/',
                        url: 'https://docs.python.org/3/',
                        name: 'Python',
                        info: 'Python'
                    },
                    {
                        favicon: 'https://www.numpy.org.cn/logo.png',
                        url: 'https://www.numpy.org.cn/reference/',
                        name: 'Numpy',
                        info: 'Numpy'
                    },
                    {
                        favicon: 'https://www.pypandas.cn/logo.png',
                        url: 'https://www.pypandas.cn/docs/',
                        name: 'pandas',
                        info: 'pandas'
                    },

                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://matplotlib.org',
                        url: 'https://matplotlib.org/contents.html',
                        name: 'matplotlib',
                        info: 'matplotlib'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=http://www.tensorfly.cn/',
                        url: 'http://www.tensorfly.cn/tfdoc/api_docs/index.html',
                        name: 'Tensorflow',
                        info: 'Tensorflow'
                    },
                    {
                        favicon: 'https://ico.hnysnet.com/get.php?url=https://pytorch.org',
                        url: 'https://pytorch.org/docs/stable/index.html',
                        name: 'Pytorch',
                        info: 'Pytorch'
                    },
                    ]
                }
                ]
            }
        })

        var search_engine = 'https://www.baidu.com/s?wd=';

        $('#search-logo').click(function () {
            $('#search-list').slideToggle()
        })

        $('#search-btn').click(function () {
            window.open(search_engine + $('#search-input').val());
        })

        $('#search-input').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                window.open(search_engine + $('#search-input').val());
            }
        });

        $('#search-input').click(function () {
            $(this).attr('placeholder', '')
        })
        $('.search-engine').click(function () {
            search_engine = $(this).attr('data-url');
            $('#search-input').attr('placeholder', $(this).attr('data-info'))
            $('#search-logo img').attr('src', $(this).children('img').attr('src'));
            $('#search-list').slideToggle()
        })
        $('.sidebar-toggle').click(function () {
            $('#sidebar').toggleClass('sidebar-close')
        })
        $('.item-folder').click(function () {
            $(this).parent('.item-title').next().slideToggle();
            $(this).parents('.series').toggleClass('item-fold');
        })
    </script>

    <div id="footer"> Copyright © 2020 <a href="https://cnblogs.com/gshang" target="_blank">GShang</a> </div>
</body>

</html>